<template>
  <div>
    <div v-if="isLazyLoading">
      <el-table ref="table" :row-class-name="tableRowClassName" :data="virtualList" row-key="deptId"
        :span-method="objectSpanMethod" :border="true">
        <el-table-column label="上级部门" width="180" sortable fixed>
          <template slot-scope="scope">
            <div class="sjbm"> {{ scope.row.parentName }}</div>
          </template>
        </el-table-column>
        <el-table-column v-if="isType == 1" label="级别人数" width="180" fixed>
          <template slot-scope="scope">
            <div class="jb">
              <div v-if="scope.row.deptType">{{ scope.row.deptType }}</div>
              <div v-if="scope.row.zbrs">{{ scope.row.zbrs }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="部门" width="180" fixed>
          <template slot-scope="scope">
            <div @click="addForm(scope.row, 'addRhtxdj')">
              <div style="font-size: 20px;font-weight: 600;">{{ scope.row.deptName }}</div>
              <div>{{ PName(scope.row) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-for="date in dateList" :key="date" :width="300 * len" :label="date">
          <template slot-scope="scope">
            <div v-if="scope.row.dj[date]" class="date-content">
              <el-card v-for="(val, dateIndex) in scope.row.dj[date]" :key="dateIndex" class="date-card">
                <div @click="addForm(val, 'updateRhtxdj')">
                  <el-form v-if="cssz.length > 0">
                    <el-form-item v-for="(item, csszIndex) in cssz.filter(s => s.name != 'deptId')" :key="csszIndex"
                      :label="item.tips">
                      <div v-if="item.name === 'jgms' && val.jgms">
                        <template v-if=" query.szm === 'll'&& isJsonString(val.jgms)">
                          <div>{{ `${JSON.parse(val.jgms).length}条` }}</div>
                          <el-card v-for="(v,o) in JSON.parse(val.jgms)" :key="o">
                            <div>点检类型：{{v.type}}</div>
                            <div>点检内容：{{v.jgms}}</div>
                            <div>用时：{{v.time}}</div>
                            <div>是否达标：{{v.dict_code}}</div>
                          </el-card>
                        </template>
                        <template v-else>
                          {{ val.jgms }}
                        </template>
                      </div>
                      <div v-else-if="item.name === 'dictCode' && val.sdd">
                        <el-tag :type="val.sdd.listClass">{{ val.sdd.dictLabel }}</el-tag>
                        <div v-if="isTimeHandly(item, val[item.children.name])">
                          <label style="color: #606266;">缺席时间：</label>
                          <span>{{ timeHandly(val[item.children.name]) }}</span>
                        </div>
                      </div>
                      <div v-else-if="item.name === 'djr' && val.user">
                        {{ val.user.nickName }}
                      </div>
                      <div v-else-if="item.name === 'cddw' && val.cddwV_list_class">
                        <el-tag :type="val.cddwV_list_class">{{ val.cddwV_dict_label }}</el-tag>
                      </div>
                      <div v-else-if="item.name === 'lrTime' && val.lrTime">
                        {{ val.lrTime.substring(11, 16) }}
                      </div>
                      <div v-else>
                        <div v-if="val[item.name]">{{ val[item.name] }}</div>
                      </div>
                    </el-form-item>
                    <el-form-item label="点检民警" v-if="query.szm === 'll'">
                      <div v-if="val['mj']">{{ val['mj'] }}</div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-card>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <virtual-scroll v-else :data="dataList" :item-size="62" key-prop="deptId" @change="renderDataChange">
      <el-table ref="table" :row-class-name="tableRowClassName" :height="heightTable" :data="virtualList"
        row-key="deptId" :span-method="objectSpanMethod" :border="true">
        <el-table-column label="上级部门" width="180" sortable fixed>
          <template slot-scope="scope">
            <div class="sjbm"> {{ scope.row.parentName }}</div>
          </template>
        </el-table-column>
        <el-table-column v-if="isType == 1" label="级别人数" width="180" fixed>
          <template slot-scope="scope">
            <div class="jb">
              <div v-if="scope.row.deptType">{{ scope.row.deptType }}</div>
              <div v-if="scope.row.zbrs">{{ scope.row.zbrs }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="部门" width="180" fixed>
          <template slot-scope="scope">
            <div @click="addForm(scope.row, 'addRhtxdj')">
              <div style="font-size: 20px;font-weight: 600;">{{ scope.row.deptName }}</div>
              <div>{{ PName(scope.row) }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-for="date in dateList" :key="date" :width="300 * len" :label="date">
          <template slot-scope="scope">
            <div v-if="scope.row.dj[date]" class="date-content">
              <el-card v-for="(val, dateIndex) in scope.row.dj[date]" :key="dateIndex" class="date-card">
                <div @click="addForm(val, 'updateRhtxdj')">
                  <el-form v-if="cssz.length > 0">
                    <el-form-item v-for="(item, csszIndex) in cssz.filter(s => s.name != 'deptId')" :key="csszIndex"
                      :label="item.tips">
                      <div v-if="item.name == 'jgms' && val.jgms">
                        <template v-if=" query.szm === 'll'&& isJsonString(val.jgms)">
                          <div>{{ `${JSON.parse(val.jgms).length}条` }}</div>
                          <el-card v-for="(v,o) in JSON.parse(val.jgms)" :key="o">
                            <div>点检类型：{{v.type}}</div>
                            <div>点检内容：{{v.jgms}}</div>
                            <div>用时：{{v.time}}</div>
                            <div>是否达标：{{v.dict_code}}</div>
                          </el-card>
                        </template>
                        <template v-else>
                          {{ val.jgms }}
                        </template>
                      </div>
                      <div v-else-if="item.name === 'dictCode' && val.sdd">
                        <el-tag :type="val.sdd.listClass">{{ val.sdd.dictLabel }}</el-tag>
                        <div v-if="isTimeHandly(item, val[item.children.name])">
                          <label style="color: #606266;">缺席时间：</label>
                          <span>{{ timeHandly(val[item.children.name]) }}</span>
                        </div>
                      </div>
                      <div v-else-if="item.name === 'djr' && val.user">
                        {{ val.user.nickName }}
                      </div>
                      <div v-else-if="item.name === 'cddw' && val.cddwV_list_class">
                        <el-tag :type="val.cddwV_list_class">{{ val.cddwV_dict_label }}</el-tag>
                      </div>
                      <div v-else-if="item.name === 'lrTime' && val.lrTime">
                        {{ val.lrTime.substring(11, 16) }}
                      </div>
                      <div v-else>
                        <div v-if="val[item.name]">{{ val[item.name] }}</div>
                      </div>
                    </el-form-item>
                    <el-form-item label="点检民警" v-if="query.szm === 'll'">
                      <div v-if="val['mj']">{{ val['mj'] }}</div>
                    </el-form-item>
                  </el-form>
                </div>
              </el-card>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </virtual-scroll>

  </div>
</template>
<script>
  import VirtualScroll from 'el-table-virtual-scroll'
  export default {
    components: {
      VirtualScroll
    },
    props: {
      dataList: {
        type: Array,
        default: () => []
      },
      cssz: {
        type: Array,
        default: () => []
      },
      dateList: {
        type: Array,
        default: () => []
      },
      len: {
        type: Number,
        default: () => 2
      },
      isType: {
        type: Number,
        default: () => 0
      },
      isLazyLoading: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        heightTable: '0px',
        virtualList: [],
        newDateList:[],
        query: {
          szm: this.$route.query.szm
        },
      }
    },

    methods: {
      isJsonString(str) {
        try {
          JSON.parse(str);
          return true;
        } catch (e) {
          return false;
        }
      },
      renderDataChange(renderData) {
        if (!this.isLazyLoading) {
          const list = this.$parent.countParentId(renderData)
          // 插入数量
          Object.freeze(list).forEach((item) => {
            renderData[item.firstIndex] = {
              ...renderData[item.firstIndex],
              count: item.count
            }
          })
          this.virtualList = Object.freeze(renderData)
        }
      },
      doLayout() {
        if (this.isLazyLoading) {
          this.virtualList = this.dataList
          this.$nextTick(() => {
            this.$refs.table.updateScrollY()
          })
        } else {
          this.heightTable = document.body.clientHeight - 160 + 'px'
          this.$nextTick(() => {
            this.$refs.table.doLayout()
          })
        }
      },
      isTimeHandly(item, val) {
        const times = JSON.parse(val)
        return item.isChildren && val && times[0] && times[1]
      },
      // 显示时间处理
      timeHandly(val) {
        const times = JSON.parse(val)
        return `${times[0].substring(11, 16)}-${times[1].substring(11, 16)}`
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        const color = 'row-color' + (rowIndex + 1)
        if (row.count) {
          return color
        }
        return ''
      },
      // 处理显示名称
      PName(v) {
        let i = 0
        Object.keys(v.dj).forEach((item) => {
          i = v.dj[item].length + i
        })
        return '当前已点' + '(' + i + ')次'
      },
      addForm(v, p) {
        this.$emit('addForm', v, p)
      },
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0) {
          return {
            rowspan: row.count ? row.count : 0,
            colspan: 1
          }
        }
      }
    }
  }

</script>
<style lang="scss" scoped>
  @function calculate-contrast-color($color) {
    $red: red($color);
    $green: green($color);
    $blue: blue($color);
    $luminance: 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;

    @if ($luminance > 128) {
      @return #606266; // 如果背景色亮度较高，则返回黑色
    }

    @else {
      @return #ffffff; // 如果背景色亮度较低，则返回白色
    }
  }

  @function random-light-color() {
    $hue: random(360); // 生成随机色调
    $saturation: random(30%) + 70%; // 饱和度为 70% 到 100%
    $lightness: random(5%) + 90%; // 亮度为 70% 到 100%
    @return hsl($hue, $saturation, $lightness);
  }

  @for $i from 1 through 300 {
    ::v-deep .row-color#{ $i } {
      $background-color: random-light-color(); // 生成随机浅色背景色
      background-color: $background-color; // 生成随机浅色背景色
      color: calculate-contrast-color($background-color); // 计算文字颜色
    }
  }

  .date-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .date-card {
      width: 280px;
      margin: 0 5px;

      .el-form-item {
        margin-bottom: 0px;
      }
    }
  }

</style>
